<template>
  <div class="container">
    <p style="position: absolute; left: 0; top: 0">{{ fps }}</p>
    <canvas
      ref="canvasRef"
      class="myCanvas"
      :width="canvasSize.width"
      :height="canvasSize.height"
    ></canvas>
  </div>
</template>
<script lang="tsx" setup>
import { useFps } from '@vueuse/core'
import { nextTick, onMounted, reactive, ref } from 'vue'

// import testImage from '@/assets/000.jpg'
// import { loadImageAsync } from '@/utils'

const fps = useFps()

const canvasRef = ref<HTMLCanvasElement>()
let ctx: CanvasRenderingContext2D | null = null
const canvasSize = reactive({
  width: 100,
  height: 200,
})
const setCanvasSize = () => {
  const width = canvasRef.value?.offsetWidth || document.body.offsetWidth
  const height = canvasRef.value?.offsetHeight || document.body.offsetHeight
  canvasSize.width = width
  canvasSize.height = height
}

const init = async () => {
  canvasRef.value!.width = canvasRef.value!.width
  drawCircle(20000)
  window.requestAnimationFrame(init)
}
const drawCircle = (count: number) => {
  const rects = Array.from(new Array(count)).map(() => {
    return {
      x: Math.random() * canvasSize.width,
      y: Math.random() * canvasSize.height,
    }
  })
  if (!ctx) return
  ctx.fillStyle = '#FF0000'
  for (let i = 0; i < rects.length; i++) {
    const centerX = rects[i].x
    const centerY = rects[i].y
    const radius = 5
    ctx.beginPath()
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
    ctx.closePath()
    ctx.fill()
  }
}

onMounted(async () => {
  setCanvasSize()
  await nextTick()
  ctx = canvasRef.value!.getContext('2d')
  init()
  window.requestAnimationFrame(init)
})
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh - 60px - 50px - 40px);
  .myCanvas {
    width: 100%;
    height: 100%;
  }
}
</style>
